<template>
  <div class="test-container">
    <div class="test-page" :class="{ 'is-rotated': isRotated }" :style="rotateStyle">
      <!-- 查询条件 -->
      <div class="mb-4">
        <el-form :inline="true" :model="queryForm">
          <el-form-item label="选项">
            <el-select
              v-model="queryForm.option"
              placeholder="请选择"
              :popper-class="isRotated ? 'rotated-select-dropdown' : ''"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button @click="toggleRotate">旋转页面</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 数字矩阵 -->
      <div :class="[
        'grid gap-4',
        isRotated ? 'grid-cols-4' : 'grid-cols-5'
      ]">
        <div
          v-for="n in 25"
          :key="n"
          class="aspect-square flex items-center justify-center bg-gray-100 rounded text-lg"
        >
          {{ n }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TestPage',
  data() {
    return {
      queryForm: {
        option: ''
      },
      options: [
        { value: '1', label: '选项1' },
        { value: '2', label: '选项2' },
        { value: '3', label: '选项3' }
      ],
      isRotated: false,
      rotateStyle: {
        transform: 'rotate(0deg)',
        transition: 'all 0.5s'
      }
    }
  },
  methods: {
    handleQuery() {
      console.log('查询条件：', this.queryForm)
    },
    toggleRotate() {
      this.isRotated = !this.isRotated
      this.rotateStyle.transform = this.isRotated ? 'rotate(90deg)' : 'rotate(0deg)'
      if (this.isRotated) {
        this.$nextTick(() => {
          this.adjustSize()
        })
      }
    },
    adjustSize() {
      const container = document.querySelector('.test-container')
      const page = document.querySelector('.test-page')
      if (container && page) {
        const containerWidth = container.clientWidth
        const containerHeight = container.clientHeight
        const scale = Math.min(containerHeight / page.clientWidth, containerWidth / page.clientHeight)
        this.rotateStyle.transform = `rotate(90deg) scale(${scale * 0.9})`
      }
    }
  }
}
</script>

<style>
.test-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.test-page {
  transform-origin: center center;
  padding: 20px;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.test-page.is-rotated {
  width: auto;
  max-width: none;
}

/* 确保下拉菜单在旋转时也能正确显示 */
.el-select-dropdown {
  position: fixed !important;
}

/* 旋转状态下的下拉菜单样式 */
.rotated-select-dropdown {
  transform: rotate(90deg) !important;
  transform-origin: center center !important;
}

/* 修复下拉选项的位置 */
.rotated-select-dropdown .el-select-dropdown__list {
  transform: rotate(180deg) !important;
}

/* 调整下拉框的位置 */
.is-rotated .el-select-dropdown__wrap {
  max-height: none !important;
}

/* 修复选项文字方向 */
.rotated-select-dropdown .el-select-dropdown__item {
  transform: rotate(180deg);
  transform-origin: center center;
}

@media (max-width: 768px) {
  .test-page {
    padding: 10px;
  }
}
</style>
